<template>
  <div class="progress_echarts">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- <h1>居民标签</h1> -->
    <div id="progress_echarts" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

function initChart() {
  var chartDom = document.getElementById("progress_echarts");
  var myChart = echarts.init(chartDom);

  // 指定图表的配置项和数据
  var option = {
    // backgroundColor: "#17326b",
    title: {
      text: "居民标签",
    },
    // grid: {
    //   left: "10",
    //   top: "10",
    //   right: "0",
    //   bottom: "10",
    //   containLabel: true,
    // },
    // 图和标题之间的距离
    grid: {
      left: "3%",
      top: "20%",
      right: "2%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      splitLine: { show: false },
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
    },
    yAxis: [
      {
        type: "category",
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
          color: "black",
          fontSize: 14,
          textStyle: {
            color: "#BDBFC5",
          },
        },
        data: ["高血压", "冠心病", "高血糖", "高血脂", "漫动病", "多动症"],
        max: 10, // 关键：设置y刻度最大值，相当于设置总体行高
        inverse: true,
      },
      {
        type: "category",
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
          color: "black",
          fontSize: 14,
          textStyle: {
            color: "#000",
          },
        },
        data: [200, 120, 40, 30, 110, 88],
        max: 10, // 关键：设置y刻度最大值，相当于设置总体行高
        inverse: true,
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        barWidth: 10,
        data: [80, 40, 60, 10, 80, 50],
        barCategoryGap: 20,
        itemStyle: {
          normal: {
            barBorderRadius: 10,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "#2984F8",
              },
              {
                offset: 1,
                color: "#2984F8",
              },
            ]),
          },
        },
        zlevel: 1,
      },
      {
        name: "进度条背景",
        type: "bar",
        barGap: "-100%",
        barWidth: 10,
        data: [100, 100, 100, 100, 100, 100],
        color: "#F2F7FB",
        itemStyle: {
          normal: {
            barBorderRadius: 10,
          },
        },
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  myChart.resize();
  window.onresize = function () {
    console.log("窗口尺寸发生变化");
    //自适应大小
    myChart.resize();
  };
}

onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 0);
});

onUnmounted(() => {
  echarts.dispose;
});
</script>

<style lang="scss" scoped>
// .progress_echarts{
//   h1{
//     font-size: 18px;
//     color:#464646;
//     font-weight: bolder;
//     margin-bottom: 30px;
//   }
// }
</style>